<template>
    <div class="definite">
        <div class="commonSearch">
            <div :class="['commonContent',isCollapse ? '' : 'isShowMore']">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <treeSelect @getId='getId' :clearable='false'></treeSelect>
                    </el-form-item>
                    <el-form-item label="时间">
                        <customSelect @changeCollapse='changeCollapse' @getTime='getTime'></customSelect>
                    </el-form-item>
                    <el-form-item label="设备">
                        <el-input v-model="searchForm.deviceSn" placeholder="请输入设备" clearable></el-input>
                    </el-form-item>
                </el-form>
                <my-button type="primary" icon="el-icon-search" size="mini"
                    style="flex-shirk:0;height:28px;width:73px;margin-left:20px" v-throttle:200='searchList'>查询
                </my-button>
            </div>
            <div :class="['arrow',isCollapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"
                @click="isCollapse = !isCollapse" v-show="checkVal == 'custom'">
            </div>
        </div>

        <div class="btnSet">
            <my-button type="primary" size="mini" icon="el-icon-download" plain>导出</my-button>
        </div>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm='searchForm'>
        </table-list>
    </div>
</template>

<script>
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                searchForm: {
                    groupId: '',
                    createTimeStart: '',
                    createTimeEnd: '',
                    page: 1,
                    limit: 10
                },
                isCollapse: false,
                checkVal:'today'
            }
        },
        components: {
            tableList
        },
        mounted() {
          
        },
        methods: {
            //分组id
            getId(id) {
                this.searchForm.groupId = id
                // this.$refs.tableList.getLampRequestList(this.searchForm)
            },
            //时间
            getTime(payload){
                console.log(payload)
            },
            searchList() {
                // this.$refs.tableList.getLampRequestList(this.searchForm)
            },
            changeCollapse(val,checkVal){
                this.isCollapse = val
                this.checkVal = checkVal
            }
        }
    }
</script>

<style lang="less" scoped>
    .definite {
        .commonSearch {
            position: relative;
            .commonContent {
                .el-form-item--mini.el-form-item {
                    width: 33%;

                    /deep/ .el-select {
                        width: 100%;
                    }
                }
            }

            .isShowMore {
                height: 40px;
                overflow: hidden;
            }

            .arrow {
                position: absolute;
                left: 50%;
                bottom: -14px;
                transform: translate(-50%, -50%);
                width: 40px;
                border: 1px solid #e8e8e8;
                border-radius: 18px;
                height: 14px;
                background: #fff;
                cursor: pointer;
                text-align: center;
                line-height: 11px;
                font-size: 12px;
            }
        }

        .btnSet {
            display: flex;
            padding: 20px 0;
            justify-content: space-between;
        }
    }
</style>